/**
 * 颜色系统
 * 所有颜色变量使用 color- 前缀
 * 命名规范：
 * - 默认选项：使用 default
 * - 变体：使用 light/dark
 */

/* 品牌色 - 主题色系 */
// 主色及其变体
$color-primary-default: #2979ff; // 默认主色
$color-primary-light: #5c9dff; // 主色亮色
$color-primary-dark: #1c64d9; // 主色暗色
$color-primary-disabled: rgba($color-primary-default, 0.3); // 主色禁用状态

// 功能色
$color-success: #07c160; // 成功色
$color-warning: #ffb703; // 警告色
$color-error: #fa3534; // 错误色
$color-info: #909399; // 信息色

/* 文字颜色 - 从深到浅排序 */
// 主要文字
$color-text-primary: #303133; // 主要文字（标题，正文）
$color-text-default: #606266; // 默认文字（改 regular 为 default）
$color-text-secondary: #909399; // 次要文字（描述，说明）
$color-text-placeholder: #c0c4cc; // 占位文字
$color-text-disabled: #d9d9d9; // 禁用状态文字
$color-text-inverse: #fff; // 反色文字（深色背景上的文字）

// 特殊文字
$color-text-link: $color-primary-default; // 链接文字
$color-text-price: #f50; // 价格文字

/* 背景颜色 */
$color-bg-default: #fff; // 默认背景（改 card 为 default）
$color-bg-page: #f5f5f5; // 页面背景色
$color-bg-mask: rgb(0 0 0 / 40%); // 遮罩层背景色
$color-bg-loading: rgb(255 255 255 / 90%); // 加载背景色

// 状态背景
$color-bg-hover: #f1f1f1; // 悬浮状态背景色
$color-bg-active: #e6e6e6; // 激活状态背景色
$color-bg-selected: #f0f7ff; // 选中状态背景色
$color-bg-disabled: #f5f5f5; // 禁用状态背景色

/* 边框颜色 - 从深到浅排序 */
$color-border-dark: #d4d4d4; // 深色边框
$color-border-default: #dcdfe6; // 默认边框（改 base 为 default）
$color-border-light: #e4e7ed; // 浅色边框
$color-border-lighter: #ebeef5; // 更浅边框

/* 渐变色 */
$color-gradient-primary: linear-gradient(
  to right,
  $color-primary-light,
  $color-primary-default
); // 主色渐变
$color-gradient-success: linear-gradient(
  to right,
  lighten($color-success, 10%),
  $color-success
); // 成功色渐变
$color-gradient-warning: linear-gradient(
  to right,
  lighten($color-warning, 10%),
  $color-warning
); // 警告色渐变
$color-gradient-error: linear-gradient(
  to right,
  lighten($color-error, 10%),
  $color-error
); // 错误色渐变
